<template>
  <el-scrollbar
    :class="{ 'is-collapse': collapse, 'side-bar-common': layout === 'common' }"
    class="side-bar-container"
  >
    <logo v-if="layout === 'vertical'" />
    <el-menu
      :active-text-color="variables['menu-color-active']"
      :background-color="variables['menu-background']"
      :collapse="collapse"
      :collapse-transition="false"
      :default-active="activeMenu"
      :default-openeds="defaultOpens"
      :text-color="variables['menu-color']"
      :unique-opened="uniqueOpened"
      menu-trigger="click"
      mode="vertical"
    >
      <template v-for="route in handleRoutes">
        <vab-menu v-if="!route.hidden" :key="route.path" :item="route" />
      </template>
    </el-menu>
  </el-scrollbar>
</template>
<script>
  import variables from '@/config/variables.scss'
  import { mapGetters } from 'vuex'
  import { defaultOpeneds, uniqueOpened } from '@/config'
  import { checkUserInfo } from '@/api/common'
  export default {
    name: 'SideBar',
    props: {
      layout: {
        type: String,
        default: 'vertical',
      },
    },
    data() {
      return {
        uniqueOpened,
        variables: variables,
        topArray: ['S22', 'S52', '1368', 'S68'],
        authorityRoute: [
          '/separate/counselor',
          '/separate/distribution',
          '/separate/audit',
          '/separate/order',
          '/separate/operate',
          '/separate/editInfo',
          '/separate/distri_operation',
          '/separate/intergral',
        ],
        // topRoute: [
        //   "/counselor",
        //   "/distribution",
        //   "/audit",
        //   "/order",
        //   "/operate",
        //   "/edit",
        //   "/intergral",
        //   "/distri_operation",
        //   "/separate",
        //   "/college",
        // ],
        secondArray: [
          'T14',
          'T59',
          'S30',
          'S71',
          '360',
          '446',
          '1330',
          '245',
          '635',
          '534',
        ],
      }
    },
    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
        routes: 'routes/routes',
      }),
      defaultOpens() {
        return defaultOpeneds
      },
      activeMenu() {
        const route = this.$route
        const { meta, path } = route
        if (meta.activeMenu) return meta.activeMenu
        return path
      },
      handleRoutes() {
        return this.routes.flatMap((route) => {
          return route.menuHidden === true && route.children
            ? route.children
            : route
        })
      },
    },
    created() {
      let user
      if (localStorage.getItem('user')) {
        user = JSON.parse(localStorage.getItem('user'))
        this.filterRoute(user)
      } else {
        const params = this.$route.query
        checkUserInfo(params).then((res) => {
          if (res.code === 200) {
            user = res.data
            this.filterRoute(user)
          }
        })
      }
    },
    methods: {
      filterRoute(user) {
        if (user.username === '1782' || user.username === '1690') {
          // 高职高考权限
          // 去掉分销的路由
          this.routes.splice(3, 1)
        } else {
          // 分销权限
          const firstRoutes = this.routes.filter(
            (item) => item.path === '/separate'
          )[0].children
          // 权限路由配置
          if (this.topArray.includes(user.username.toUpperCase())) {
            firstRoutes.map((item) => {
              if (this.authorityRoute.includes(item.path)) {
                item.hidden = false
              }
            })
          } else if (this.secondArray.includes(user.username.toUpperCase())) {
            this.authorityRoute.pop()
            firstRoutes.map((item) => {
              if (this.authorityRoute.includes(item.path)) {
                item.hidden = false
              }
            })
          } else {
            firstRoutes.map((item) => {
              if (
                item.path === '/separate/editInfo' ||
                item.path === '/separate/distribution'
              ) {
                item.hidden = false
              }
              // 特殊角色T60，需要提现审核、验证招生顾问
              if (user.username === 'T60' && item.path === '/audit') {
                item.hidden = false
              }
            })
          }
          this.routes[3].children = firstRoutes
          // 去掉高职高考的路由
          this.routes.splice(5, 1)
        }

        // 可访问路由地址
        const errorRoute = ['/404', '/403']
        const arr = []
        this.routes.forEach((item) => {
          if (errorRoute.includes(item.path)) {
            arr.push(item.path)
          } else if (item.children && item.hidden === false) {
            item.children.map((item) => {
              arr.push(item.path)
            })
          }
        })
        arr.push('/verification')
        localStorage.setItem('routes', JSON.stringify(arr))
      },
    },
  }
</script>
<style lang="scss" scoped>
  @mixin active {
    &:hover {
      color: $base-color-white;
      background-color: $base-menu-background-active !important;
    }

    &.is-active {
      color: $base-color-white;
      background-color: $base-menu-background-active !important;
    }
  }

  .side-bar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z-index;
    width: $base-left-menu-width;
    height: 100vh;
    overflow: hidden;
    background: $base-menu-background;
    box-shadow: $base-box-shadow;
    transition: width $base-transition-time;

    &.side-bar-common {
      top: $base-top-bar-height;
      height: calc(100vh - #{$base-top-bar-height});
    }

    &.is-collapse {
      width: $base-left-menu-width-min;
      border-right: 0;

      ::v-deep {
        .el-menu--collapse.el-menu {
          > .el-menu-item,
          > .el-submenu {
            text-align: center;
            transition: width $base-transition-time;

            .vab-fas-icon {
              padding-right: 0;
            }

            .vab-remix-icon {
              padding-right: 0;
            }
          }
        }

        .el-menu-item,
        .el-submenu {
          text-align: left;
        }

        .el-menu--collapse {
          border-right: 0;

          .el-submenu__icon-arrow {
            right: 10px;
            margin-top: -3px;
          }
        }
      }
    }

    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }

      .el-menu {
        border: 0;

        .vab-fas-icon {
          padding-right: 3px;
          font-size: $base-font-size-default;
        }

        .vab-remix-icon {
          padding-right: 3px;
          font-size: $base-font-size-default + 2;
        }
      }

      .el-menu-item,
      .el-submenu__title {
        height: $base-menu-item-height;
        overflow: hidden;
        line-height: $base-menu-item-height;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;

        i {
          color: inherit;
        }
      }

      .el-menu-item {
        @include active;
      }
    }
  }
</style>
